/* Dialog 
 * 
 * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
 * 
 * Dialog:
 * 1. Dialog (default styling): 
 * 		.dijitDialog - styles for dialog's bounding box
 *
 * 2. Dialog title 
 * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
 * 		.dijitDialogTitle - the text container in dialog title
 * 
 * 3. Dialog content 
 * 		.dijitDialogPaneContent - main container for content area and action bar
 * 		.dijitDialogPaneContentArea - styles for content container
 * 
 * 4. Dialog action bar 
 * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
 * 
 * 5. Dialog underlay 
 * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
 * 
 * 
 * Tooltip & TooltipDialog:
 * 1. tooltip content container: 
 * 		.dijitTooltipContainer - tooltip content container
 *
 * 2. tooltip connector: 
 * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
 */
/*harjeet*/
.twilight .dijitDialog {
	border: 1px solid #769dc0;
	border-radius: 3px;
    -moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px;
    -moz-box-shadow: 3px 3px 4px #636363;
    -moz-box-shadow: #636363 3px 3px 4px;
}
.twilight .dijitDialog {
    -moz-border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 3px 3px 4px #636363;
    border: 1px solid #D3D3D3;
}
/*harjeet*/
.twilight .dijitDialog.dijitDialogHover {
	border: 1px solid #ED8714;
} 
/*harjeet*/
.twilight .dijitDialogPaneContent {
	background: #fff repeat-x top left;
	xxxborder-top: 1px solid #769dc0;
	border-top: 1px solid #9D9DA1;
	padding:10px 8px;
	position: relative;
}

.twilight .dijitDialogPaneContentArea {
	/* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from
	 * left to right but still indent dialog content
	 */ 
	margin: -10px -8px;
	padding: 10px 8px;
}

.twilight .dijitDialogPaneActionBar {
	/* gray bar at bottom of dialog with OK/Cancel buttons */
	background-color: #F8F8F8;
	padding: 3px 5px 2px 7px;
	text-align: right;
	border-top: 1px solid #769DC0;
	margin: 10px -8px -10px;
}
.twilight .dijitDialogPaneActionBar .dijitButton {
	float: none;
}
/*harjeet*/
.twilight .dijitDialogTitleBar {
	/* outer container for the titlebar of the dialog */
	xxxborder: 1px solid #fff;
	xxxborder-top:none;
	xxxbackground-color: #abd6ff;
	xxxbackground-image: url("images/titlebar.png");
	xxxbackground-repeat:repeat-x;
	padding: 6px 7px;
	background:#ECF1F5;
	background-image: -moz-linear-gradient(top, #F7FAFD, #D3D3D3); 
	background-image: -webkit-gradient(linear, center top, center bottom, from(#F7FAFD), to(#D3D3D3));
}

.twilight .dijitDialogTitle {
	/* typography and styling of the dialog title */
	padding: 0px 1px;
	font-size:1.091em;
}

.twilight .dijitDialogCloseIcon {
	/* the default close icon for the dialog */
	background: url("images/dialogCloseIcon.png");
	background-repeat:no-repeat;
	position: absolute;
	right: 5px;
	height: 15px;
	width: 21px;
}
.dj_ie6 .twilight .dijitDialogCloseIcon {
	background-image: url("images/dialogCloseIcon8bit.png");
}
.twilight .dijitDialogCloseIconHover {
	background-position:-21px;
}
.twilight .dijitDialogCloseIconActive {
	background-position:-42px;
}

/* Tooltip and TooltipDialog */

.twilight .dijitTooltip,
.twilight .dijitTooltipDialog {
	/* the outermost dom node, holding the connector and container */
	background: transparent;	/* make the area on the sides of the arrow transparent */
}
/*harjeet*/
.dijitTooltipBelow {
	/* leave room for arrow above content */
	xxxpadding-top: 13px;
	xxxpadding-left:3px;
	xxxpadding-right:3px;
	padding: 13px 3px 3px;
}
/*harjeet*/
.dijitTooltipAbove {
	/* leave room for arrow below content */
	xxxpadding-bottom: 13px;
	xxxpadding-left:3px;
	xxxpadding-right:3px;
	padding: 3px 3px 13px;
}
/*harjeet*/
.twilight .dijitTooltipContainer {
	/* the part with the text */
	background-color:#fff;
	xxxbackground-image:url("images/tooltip.png");
	xxxbackground-repeat:repeat-x;
	xxxbackground-position:-575px 100%;
	xxxborder:1px solid #769DC0;
	border:1px solid #9D9DA1;
	padding:6px 8px;
	border-radius: 4px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	box-shadow:0px 0px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
	font-size: 1em;
} 

.dj_ie6 .twilight .dijitTooltipContainer {
	background-image: none;
}
.twilight .dijitTooltipConnector {
	/* the arrow piece */
	border: 0px;
	z-index: 2;
	background-image:url("images/tooltip.png");
	background-repeat:no-repeat;
	width:16px;
	height:14px;
}
.dj_ie6 .twilight .dijitTooltipConnector {
	background-image:url("images/tooltip8bit.png");
}
.twilight .dijitTooltipABRight .dijitTooltipConnector {
	/* above or below tooltip, but the arrow appears on the right,
		and the right edges of target and tooltip are aligned rather than the left */
	left: auto !important;
	right: 3px;
}

.twilight .dijitTooltipBelow .dijitTooltipConnector {
	/* the arrow piece for tooltips below an element */
	top: 0px;
	left: 3px;
	background-position:-31px 0%;
	width:16px;
	height:14px;
}

.twilight .dijitTooltipAbove .dijitTooltipConnector {
	/* the arrow piece for tooltips above an element */
	bottom: 0px;
	left: 3px;
	background-position:-15px 0%;
	width:16px;
	height:14px;
}
.dj_ie7 .twilight .dijitTooltipAbove .dijitTooltipConnector,
.dj_ie6 .twilight .dijitTooltipAbove .dijitTooltipConnector {
	bottom: -1px;
}

.twilight .dijitTooltipLeft {
	padding-right: 14px;
}
.dj_ie6 .twilight .dijitTooltipLeft {
	padding-left: 15px;
}
.twilight .dijitTooltipLeft .dijitTooltipConnector {
	/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
	right: 0px;
	bottom: 3px;
	background-position:0px 0%;
	width:16px;
	height:14px;
}

.twilight .dijitTooltipRight {
	padding-left: 14px;
}
.twilight .dijitTooltipRight .dijitTooltipConnector {
	/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
	left: 0px;
	bottom: 3px;
	background-position:-48px 0%;
	width:16px;
	height:14px;
}

.twilight .dijitDialogUnderlay {
	background: #fff;
}
